<template>
  <div v-bind:class="[colmd ,colxs ,pullCenter]">
    <div class="layui-card">
      <div class="layui-card-header" v-if="cardTitle!=''">
          <div class="layui-col-md9">
            <!-- 你的内容 9/12 -->
            <span style="color:#9a9a9a;font-weight: 520;">{{cardTitle||''}}</span>
          </div>
          <div class="layui-col-md3" align="right">
            <slot name="topRight"></slot>
          </div>
      </div>
      <div class="layui-card-body layui-card-body-formEle" ref="cardBody">
        <slot name="body"></slot>
      </div>
      <div class="layui-card-footer">
        <div class="layui-input-block layui-input-block-center">
          <div class="layui-footer" style="left: 0;">
            <slot name="footer"></slot>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  define(['vue'],function(vue){
    return vue.component('comp-card',{
      template: template,
      props:['cardWidthCol','card-height','card-title'],
      data:function(){
        return {
          colmd : 'layui-col-md' + this.cardWidthCol,
          colxs : ' layui-col-xs12',
          pullCenter : 'card-pull-center'
        }
      },
      methods : {
        setHeight : function() {
          var bodyHeight = this.cardHeight || '600';
          if(bodyHeight == '100%'){
            bodyHeight = document.documentElement.clientHeight || document.body.clientHeight;
            bodyHeight = bodyHeight - 156;
          }
          this.$refs.cardBody.style.cssText = "max-height:"+bodyHeight+'px;overflow:auto;min-height:150px;';
        }
      },
      mounted:function(){
        this.setHeight();
        var that = this;
        window.onresize = function() {
          that.setHeight();
        }
        // console.log(this.$refs.cardBody.style.cssText);
      }
    });
  });
</script>

<style>
</style>